<template>
  <div>
    <div class="information_edit">
      <div class="page_top padding_20">
        <div style="font-weight: 600;margin-bottom: 20px;">恭喜您！发布成功！</div>
        <div style="font-size: 10px;color: #999;margin-bottom: 20px;">您的活动将会直接在平台中进行展示</div>
        <div>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="closePage">查看</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="closePage">返回商品管理</el-button>
        </div>
      </div>

      <div class="page_content padding_20">
        <div class="content_title"><span style="font-size: 14px;">推送分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">以下渠道带有渠道监测功能，可检测该活动在不同渠道的展现及参与次数</span>
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">手机分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">支持微信/支付宝/QQ/手机浏览器等二维码识别工具直接扫码查看</span>
        </div>
        <div style="padding-bottom: 10px;">
          <img :src="detail.qrcode" class="ewm_img" alt="">
          <!-- <div class="my_button"><span>微信分享设置</span></div> -->
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">网页分享</span>
          <span style="color: #999;font-size: 10px;font-weight: 100;margin-left: 10px;">可以直接分享链接到相应媒体（邮件、QQ、微博等），或者嵌入到微信公众号菜单</span>
        </div>
        <div class="web_share">
          <div class="flex text">{{ detail.url }}</div>
          <div v-clipboard:copy="detail.url" v-clipboard:success="onCopy" v-clipboard:error="onError" class="button"><span>复制网页链接</span></div>
        </div>
        <div class="content_title"><span style="font-size: 14px;font-weight: 500;">媒介分享</span></div>
        <div class="share_item">
          <img src="../../../assets/commodity_img/u3703.png" alt="" @click="showselfshare(2)">
          <img src="../../../assets/commodity_img/u3708.png" alt="" @click="showselfshare(9)">
          <img src="../../../assets/commodity_img/u3710.png" alt="" @click="showselfshare(3)">
          <img src="../../../assets/commodity_img/u3709.png" alt="" @click="showselfshare(6)">
          <img src="../../../assets/commodity_img/u3711.png" alt="" @click="showselfshare(4)">
        </div>
        <!-- <div class="content_title"><span style="font-size: 14px;font-weight: 500;">自定义分享</span></div>
        <div class="self_share">
          <div class="item">
            <div class="left"><span>百</span></div>
            <div class="right"><span>X</span></div>
          </div>
          <div class="add_btn"><span>+</span></div>
        </div> -->
      </div>
    </div>

    <el-dialog
      title="微信分享设置"
      :visible.sync="wx_share_set"
      width="80%"
    >
      <div class="wx_set_content">
        <div class="left">
          <div style="padding: 20px 0;">
            <div class="ad_item" style="align-items: center;"><span>标题文字</span></div>
            <el-input v-model="title" placeholder="kamisoul" />
          </div>
          <div style="padding: 20px 0;">
            <div class="ad_item" style="align-items: center;"><span>分享描述</span></div>
            <el-input v-model="title" placeholder="kamisoul" />
          </div>
          <div>
            <div class="" style="margin-bottom: 10px;">
              <span>分享图片</span>
              <span style="color: #ccc;font-size: 12px;">720X720PX的图像最佳，大小请不要超过3M</span>
            </div>
            <div style="display: flex;">
              <el-upload
                class="avatar-uploader"
                accept="image/png,image/jpeg,image/gif"
                action="#"
                :show-file-list="false"
                :on-change="beforeAvatarUpload"
                :auto-upload="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

            </div>

          </div>
        </div>
        <div class="right">
          <div style="padding: 20px 0;">预览效果</div>
          <div class="pre_wrap">
            <img class="bg_img" src="../../../assets/commodity_img/u3763.png" alt="">
            <img src="../../../assets/404_images/404.png" class="pic_img" alt="">
            <div class="pre_txt">
              <span>蚊子蚊子</span>
            </div>

          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wx_share_set = false">取 消</el-button>
        <el-button type="primary" @click="wx_share_set = false">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="媒介分享"
      :visible.sync="selfshare"
      width="60%"
    >
      <div>
        <div style="padding-bottom: 20px;">
          <div class="ad_item" style="align-items: center;"><span>渠道名称</span></div>
          <!-- <el-input v-model="" readonly placeholder="kamisoul" /> -->
          <div>
            {{
              sharetype==2?'QQ':
              sharetype==9?'新浪微博':
              sharetype==3?'百度贴吧':
              sharetype==6?'豆瓣':
              sharetype==4?'知乎':'其他'
            }}
          </div>
        </div>
        <div style="padding-bottom: 20px;">
          <div class="ad_item" style="align-items: center;"><span>渠道专用二维码</span></div>
          <img :src="selfdetail.qrcode" style="width: 150px;border: 1px solid #F1F1F1;padding: 2px;" alt="">
        </div>
        <div style="padding-bottom: 20px;">
          <div class="ad_item" style="align-items: center;"><span>渠道专用二维码</span></div>
          <div class="web_share">
            <div class="flex text">{{ selfdetail.url }}</div>
            <div v-clipboard:copy="selfdetail.url" v-clipboard:success="onCopy" v-clipboard:error="onError" class="button"><span>复制网页链接</span></div>
          </div>
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selfshare = false">取 消</el-button>
        <el-button type="primary" @click="selfshare = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getReferer, getCommodityShareUrl } from '@/api/commodity'

export default {
  props: ['editdata','addCommodityid'],
  data() {
    return {
      title: '',

      imageUrl: '',
      imgFile: '',

      wx_share_set: false,
      selfshare: false,

      detail: '',
      selfdetail: '',
      sharetype: ''
    }
  },
  created() {
    console.log(this.editdata, this.addCommodityid)
    if(this.editdata) {
      this.commodityid = this.editdata.commodityid
    } else {
      this.commodityid = this.addCommodityid
    }
    this.getReferer()
    this.getCommodityShareUrl()
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    closePage() {
      this.$parent.closeEditpage()
    },
    getReferer() {
      getReferer().then(res => {

      })
    },
    getCommodityShareUrl() {
      getCommodityShareUrl({ commodityid: this.commodityid, referer: '0' }).then(res => {
        this.detail = res.detail
      })
    },
    getShareUrl(type) {
      getCommodityShareUrl({ commodityid: this.commodityid, referer: type }).then(res => {
        this.selfdetail = res.detail
      })
    },
    // 复制成功时的回调函数
    onCopy(e) {
			 this.$message.success('内容已复制到剪切板！')
    },
    // 复制失败时的回调函数
    onError(e) {
			 this.$message.error('抱歉，复制失败！')
    },
    showselfshare(type) {
      this.selfshare = true
      this.sharetype = type
      this.getShareUrl(type)
    }

  }
}
</script>
<style>

		.el-dialog__body{
			border-top: 1px solid #F1F1F1;
			border-bottom: 1px solid #F1F1F1;
		}
</style>
<style lang="less" scoped>
	.el-dialog__body{
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	.avatar-uploader .avatar-uploader-icon{
		width: 100px;
		height: 100px;
		line-height: 100px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
	.pre_tab_img{
		width: 100px;height: 100px;
	}
.padding_20{
	padding: 20px;
}
.must_icon{
	color: #fff;
	background: #FF4D51;
	padding: 4px;
	font-size: 12px;
}

.information_edit{
	border: 1px solid #ccc;
	background: #fff;
}

.page_top{
	text-align: center;
	font-size: 16px;
	border-bottom: 1px solid #ccc;
}
.page_content{
	border-bottom: 1px solid #ccc;
	.detail_content{
		.top_nav{
			margin: 10px 0 20px 0;
			.left{
				font-size: 14px;
				color: #ccc;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ccc;
				border-bottom: none;
			}
			.right{
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				border-bottom: 1px solid #ccc;
			}
		}
		.detail_body{
			padding-left: 10px;
			.item{
				margin: 10px 0;
			}
		}
	}
}
.content_title{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 10px;
}
.page_content_tit{
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}
.page_foot{
	display: flex;
	justify-content: flex-end;
}
.ad_item{
	display: flex;
	margin-bottom: 10px;
}

.ewm_img{
	width: 80px;height: 80px;
	vertical-align: bottom;
}
.my_button{
	width: 100px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border:1px solid #409EFF;
	color: #409EFF;
}

.web_share{
	display: flex;
	box-sizing: border-box;
	padding-bottom: 10px;
	.flex{
		flex: 1;
	}
	.text{
		border:1px solid #ccc;
		background: #f1f1f1;
		color: #999;
		padding: 10px;

    word-break: break-all;
	}
	.button{
		width: 140px;
		padding: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #fff;
		background: #0000FF;
		cursor: pointer;
	}
}
.share_item{
	padding-bottom: 10px;
	img{
		width: 30px;
		height: 30px;
		cursor: pointer;
	}
}
.self_share{
	padding-bottom: 10px;

	.item{
		height: 30px;
		border: 1px solid #0000FF;
		display:inline-flex;
		.left{
			background: #0000FF;
			color:#fff;
			width: 30px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.right{
			width: 30px;
			color: #0000FF;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}
	.add_btn{
		height: 30px;
		width: 30px;
		color: #0000FF;
		border: 1px solid #0000FF;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
.wx_set_content{
	display: flex;
	.left{
		flex: 1;
		padding-right: 10px;
		border-right: 1px solid #f1f1f1;
	}
	.right{
		flex: 1;
		padding-left: 10px;
		.pre_wrap{
			position: relative;
			width:280px;
			.bg_img{
				width: 280px;
			}
			.pic_img{
				width: 30px;height: 30px;
				position: absolute;
				top: 132px;
				left: 64px;
			}
			.pre_txt{
				position: absolute;
				top: 132px;
				left: 102px;
				width: 156px;
				font-size: 12px;
				display: -webkit-box;
				-webkit-line-clamp:2;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
			}
		}

	}
}

</style>
